<template>
	<view class="a-reward">
		<uni-nav-bar title="酷玩盲盒机" color="#333" leftIcon="left" backgroundColor="#F0DBB0;" :border="false"
			:statusBar="true" :fixed="true">
			<template v-slot:left>
				<view @click="$common.back()">
					<image src="/static/images/back.png" style="width: 32rpx; height: 32rpx" mode="scaleToFill" />
				</view>
			</template>
		</uni-nav-bar>
		<view class="content">
			<view class="header">
				<view class="left">
					<image class="img1" src="/static/Group 767.png"/>
					<image class="img2" src="/static/images/hg_yp.png" />
				</view>
				<view class="center">
					<view class="name">商品名商品名商品名</view>
					<view class="progress">
						<u-line-progress active-color="#e7b15d" inactive-color="#693207" :height="30" :round="false"
							:percent="50" :striped="true" :striped-active="true"></u-line-progress>
					</view>
					<view class="tags">
						<view class="tag">¥59/抽</view>
						<view class="tag br">记录</view>
					</view>
				</view>
				<view class="right">
					<image mode="widthFix" style="width: 92rpx;" src="/static/images/gz.png"  @click="checkGz"/>
					<image mode="widthFix" style="width: 92rpx;" src="/static/images/fx.png" />
				</view>
			</view>
			<view class="goods_box">
				<view class="content-box">
					<view class="grid-container">
						<view class="grid-item" v-for="(item,index) in DataList" :key="index">
							<view class="goods">
								<image class="img" style="height: 104rpx;" mode="widthFix" :src="item.thumb" />
								<view class="info">
									<view class="name">{{item.title}}</view>
									<view class="price">
										<image mode="widthFix" src="/static/images/luckys.png"/>
										<text>{{item.number}}/{{item.price}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="footer">
				<view class="fl">
					<image mode="widthFix" @click="ClickShowdd(1)" src="/static/images/buy1.png" />
					<image mode="widthFix" @click="ClickShowdd(3)" src="/static/images/buy3.png" />
					<image mode="widthFix" @click="ClickShowdd(5)" src="/static/images/buy5.png" />
					<image mode="widthFix" @click="ClickShowdd(10)" src="/static/images/buyall.png" />
				</view>
			</view>
		</view>
		<!-- 规则弹窗 -->
		<u-popup mode="center" border-radius="8" v-model="showRule">
			<view class="pop-box">
				<view class="pop-header">
					<image class="bg" mode="widthFix" src="/static/images/Group 1410105122.png" />
					<text class="title">规则</text>
					<image class="gb" src="/static/images/gb.png" @click="showRule = false" />
				</view>
				<view class="content">
					XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// import {getListBox} from '@/api/getlist';
	
	export default {
		data() {
			return {
				DataList:[],
				showRule: false,
				whitelist:'',
				page: 1,
				perPage: 10,
				isLoading:false,
				num: 0, // 商品数量
				showdd: false,
			};
		},
		onShow() {
			this.getListBox()
		},
		methods: {
			getListBox() {
			  if (this.isLoading) return;
			  this.isLoading = true;
			  // Get API parameters based on active navigation type
			  const params = this.getApiParams();
			
			  this.req({
			    url: "/v1/box/list",
			    data: {
			      ...params,
			      page: this.page,
			      per_page: this.perPage,
			    },
			    Loading: false, // 使用自定义loading状态
			    success: (res) => {
			      this.isLoading = false;
			      if (res.code == 200) {
			        const newItems = res.data.data || [];
					this.DataList=newItems
			      } else {
			        // 请求成功但业务失败
			        uni.showToast({
			          title: res.message || "加载失败",
			          icon: "none",
			        });
			      }
			    },
			    fail: (err) => {
			      this.isLoading = false;
			      // 网络请求失败
			      uni.showToast({
			        title: "网络请求失败，请检查网络",
			        icon: "none",
			      });
			
			      console.error("网络请求失败:", err);
			    },
			  });
			},
			// 获取接口type参数
			getTypeParam() {
			  // whitelist: 0-推荐, 1-新品, 2-热门, 3-专区
			  // API type参数: 推荐不需要传特定值，坑位赏 =1, 无限赏 =2, 扭蛋机=3
			  return this.whitelist === 0 ? "1" : String(this.whitelist);
			},
			
			// 获取API参数
			getApiParams() {
			  // 推荐: hot=1, type为空
			  // 新品/热门/专区: hot为空, type有对应值
			  if (this.whitelist === 0) {
			    return { hot: "1" };
			  } else {
			    return { type: String(this.whitelist) };
			  }
			},
			checkGz() {
				this.showRule = true;
			},
			// 根据标签ID筛选数据
			ClickShowdd(data) {
			  this.num = data;
			  this.showdd = true;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.a-reward {
		background-color: #f0dbb0;
		min-height: 100vh;

		.content {
			position: relative;
		}

		.header {
			width: 100%;
			padding-left: 40rpx;
			padding-right: 30rpx;
			display: flex;
			align-items: center;
			position: absolute;
			top: 30rpx;
			left: 0;
			z-index: 2;

			.left {
				width: 200rpx;
				height: 240rpx;
				position: relative;

				.img1 {
					width: 200rpx;
					height: 200rpx;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
				}

				.img2 {
					width: 196rpx;
					height: 70rpx;
					position: absolute;
					bottom: 0;
					left: 2rpx;
					z-index: 1;
				}
			}

			.center {
				flex: 1;
				height: 240rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding: 0 30rpx;

				.name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 28rpx;
					color: #000000;
					text-align: left;
				}

				.progress {
					margin-top: 20rpx;
					background: #693307;
					border-radius: 9rpx;
					border: 5rpx solid #C48636;
					display: flex;
					align-items: center;
				}

				.tags {
					margin-top: 20rpx;
					display: flex;

					.tag {
						background: #F25A56;
						border-radius: 9rpx;
						width: 88rpx;
						height: 40rpx;
						text-align: center;
						line-height: 40rpx;
						margin-right: 20rpx;
						font-size: 19rpx;
						color: #FFFFFF;
						text-stroke: 2px #1D1D1D;
					}

					.br {
						border: 1px solid #333333;
					}
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}

		.goods_box {
			width: 738rpx;
			height: 1070rpx;
			background-image: url(/static/images/box.png);
			background-size: 100%;
			background-repeat: no-repeat;
			position: absolute;
			top: 200rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
			.content-box {
				width: 100%;
				height: 100%;
				padding: 140rpx 60rpx 90rpx;
				overflow: hidden;
			}
			.grid-container {
				width: 100%;
				height: 100%;
				overflow-y: scroll;
				display: flex;
				flex-wrap: wrap;
			}
			
			.grid-item {
				width: calc(25% - 8rpx);
				margin: 4rpx;
				.goods {
					width: 100%;
					background: #F8F5E4;
					border: 2rpx solid #473529;
					border-radius: 10rpx;
				
					.img {
						display: block;
						width: 100%;
						height: 104rpx;
					}
				
					.info {
						padding: 10rpx;
				
						.name {
							font-size: 20rpx;
							color: #000000;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
				
						.price {
							margin-top: 6rpx;
							font-size: 20rpx;
							color: #000000;
							display: flex;
							justify-content: space-between;
							align-items: center;
							image {
								width: 74rpx;
							}
						}
					}
				}
			}
		}

		.footer {
			width: 738rpx;
			height: 170rpx;
			position: absolute;
			left: 50%;
			top: 1300rpx;
			transform: translateX(-50%);
			
			.fl {
				display: flex;
				align-items: center;
			}

			image {
				width: 25%;
			}
		}
		
		.pop-box {
			width: 670rpx;
			background: #F88802;
			border-radius: 10rpx;
			border: 6rpx solid #F88802;
		
			.pop-header {
				width: 100%;
				height: 112rpx;
				position: relative;
		
				.bg {
					width: 100%;
				}
		
				.title {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					font-family: FZHeiJinGangTiS, FZHeiJinGangTiS;
					font-weight: bold;
					font-size: 36rpx;
					color: #FFFFFF;
					text-shadow:
						-2px -2px 0 #000,
						2px -2px 0 #000,
						-2px 2px 0 #000,
						2px 2px 0 #000;
					/* 黑色描边 */
				}
		
				.gb {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					top: 50%;
					right: 30rpx;
					transform: translateY(-50%);
				}
			}
		
			.content {
				height: 760rpx;
				background: #EEECD3;
				padding: 30rpx;
				word-wrap: break-word;
				overflow-y: scroll;
		
				.top_tab {
					width: 100%;
					overflow: hidden;
		
					.scroll-X {
						white-space: nowrap;
						width: 100%;
					}
		
					.tab {
						width: 108rpx;
						height: 48rpx;
						line-height: 40rpx;
						text-align: center;
						background-color: #f7b33a;
						border: 4rpx solid #161300;
						border-radius: 12rpx;
						display: inline-block;
						font-size: 22rpx;
						font-weight: bold;
						color: #FFFFFF;
						text-shadow:
							-2px -2px 0 #000,
							2px -2px 0 #000,
							-2px 2px 0 #000,
							2px 2px 0 #000;
						/* 黑色描边 */
						margin-right: 30rpx;
					}
					
					.tab-a {
						width: 108rpx;
						height: 48rpx;
						line-height: 40rpx;
						text-align: center;
						background-color: #f16258;
						border: 4rpx solid #161300;
						border-radius: 12rpx;
						display: inline-block;
						font-size: 22rpx;
						font-weight: bold;
						color: #FFFFFF;
						text-shadow:
							-2px -2px 0 #000,
							2px -2px 0 #000,
							-2px 2px 0 #000,
							2px 2px 0 #000;
						/* 黑色描边 */
						margin-right: 30rpx;
					}
		
				}
			}
		}
	}
</style>